<h3>主要导航</h3>
<p><code>.nav-primary</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-primary">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h3>次要导航</h3>
<p>通常与主导航一起使用</p>
<p><code>.nav-secondary</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-secondary">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li>
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h3>复合导航</h3>
<p>复合导航包含一个主要导航和一个次要导航</p>
<h3>标签页导航</h3>
<p><code>.nav-tabs</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li>
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h3>圆点导航</h3>
<p><code>.nav-pills</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li>
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h2>状态</h2>
<h3>禁用的导航链接</h3>
<p>在禁用的项目上添加<code>.disabled</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li class="disabled">
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-pills">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li class="disabled">
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-secondary">
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li class="disabled">
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h2>参数</h2>
<h3>垂直排列</h3>
<p><code>.nav-stacked</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-primary nav-stacked">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-secondary nav-stacked">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-stacked nav-pills">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h3>自适应宽度</h3>
<p>自适应宽度不能与垂直排列同时使用</p>
<p><code>.nav-justified</code></p>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-primary nav-justified">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-justified nav-tabs">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-secondary nav-justified">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-justified nav-pills">
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
<h3>带标题的导航</h3>
<div spellcheck="false" class="example" contenteditable="true">
  <ul class="nav nav-tabs">
    <li class="nav-heading">这是标题</li>
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li class="disabled">
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-pills">
    <li class="nav-heading">这是标题</li>
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li class="disabled">
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-secondary">
    <li class="nav-heading">This is heading</li>
    <li class="active">
      <a href="###">首页</a>
    </li>
    <li>
      <a href="###">个人资料</a>
    </li>
    <li class="disabled">
      <a href="###">消息</a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-primary nav-stacked">
    <li class="nav-heading">这是标题</li>
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-secondary nav-stacked">
    <li class="nav-heading">THIS IS HEADINGS</li>
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <ul class="nav nav-stacked nav-pills">
    <li class="nav-heading">THIS IS HEADINGS</li>
    <li class="active">
      <a href="###">首页 </a>
    </li>
    <li>
      <a href="###">个人资料 <span class=
      "label label-badge label-success pull-right">4</span></a>
    </li>
    <li>
      <a href="###">消息 </a>
    </li>
    <li>
      <a class="dropdown-toggle" data-toggle="dropdown" href="###">更多</a>
      <ul class="dropdown-menu">
        <li>
          <a href="">Lorem ipsum.</a>
        </li>
        <li>
          <a href="">Optio, fuga.</a>
        </li>
        <li>
          <a href="">Dicta, vero.</a>
        </li>
        <li>
          <a href="">Doloribus, obcaecati.</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
